<!-- 库存管理 -->
<template>
    <div class="inventory">
        <div class="boxTitle">
            <img src="@/assets/images/home/rightIcon.png" alt="">
            <span class="title">库存管理</span>
        </div>
        <div class="search">
            <el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期"
                end-placeholder="结束日期" />
            <span class="btn btn_search">搜索</span>
            <span class="btn btn_add">新增</span>
        </div>
        <div class="table">
            <el-table :data="tableData.list" stripe height="19.91vh" :scrollbar-always-on="true">
                <el-table-column prop="date" label="日期" class-name="column_date" align="center" />
                <el-table-column prop="inventory" label="当日剩余库存" class-name="column_common" align="center"/>
                <el-table-column prop="weight" label="地磅房总重量" align="center" />
                <el-table-column prop="weight2" label="投料总重量" align="center" />
                <el-table-column prop="water" label="滤液调节池进水量" align="center" />
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">

let date = ref("");//搜索日期

let tableData = reactive({
    list: [
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
        { date: "2024-05-23", inventory: "56.3", weight: 78.3, weight2: 89.2, water: 7.2 },
    ]
})
</script>

<style lang="scss" scoped>
.inventory {
    position: absolute;
    width: vh(421);
    height: vh(302);
    right: vh(21);
    bottom: vh(60);
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    // border-radius: vh(10);
    // background-color: rgba(11, 26, 50, 0.6);

    .boxTitle {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: vh(8);

        img {
            width: vh(15);
            height: vh(17);
        }

        .title {
            margin-left: vh(6);
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: vh(16);
            color: #00E3FE;
            line-height: vh(16);
        }
    }

    .search {
        padding-left: vh(13);
        display: flex;
        align-items: center;
        margin-top: vh(20);

        :deep(.el-date-editor) {
            width: vh(179);
            height: vh(22);
            line-height: vh(22);
            font-size: vh(11);
            flex-grow: 0;
            background: rgba(11, 122, 155, 0.5);
            border-radius: vh(3);
            border: vh(1) solid #00BDE5;
            color: #00E3FE;
            box-shadow: none;


            .el-range-input {
                height: vh(22);
                line-height: vh(22);
                font-size: vh(11);
                color: #00E3FE;

                &::input-placeholder {
                    color: #00E3FE;
                }

                &::-webkit-input-placeholder {
                    color: #00E3FE;
                }
            }

            .el-range-separator {
                color: #00E3FE;
            }

            .el-range__icon {
                width: vh(12);
                height: vh(12);
                background: url(@/assets/images/digitalProduction/calendar.png) no-repeat;
                background-size: 100% 100%;

                svg {
                    display: none;
                }
            }
        }

        .btn {
            width: vh(48);
            height: vh(22);
            line-height: vh(22);
            text-align: center;
            display: inline-block;
            border-radius: vh(3);
            background: rgba(0, 207, 136, 0.5);
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: vh(12);
            color: #FFFFFF;
            letter-spacing: 1px;

            &.btn_search {
                background: #0B7A9B;
                margin-left: vh(12);
                margin-right: vh(12);
            }
        }
    }

    .table {
        // height: vh(215);
        // overflow-y: scroll;
        box-sizing: border-box; 
        padding-left: vh(13);
        padding-right: vh(13);
        margin-top: vh(17);

        .el-table {
            width: vh(395);
            overflow: hidden;
            overflow-x: hidden;
            box-sizing: border-box; 
            :deep(.el-table__header) {
                width: vh(395) !important;
            }
            :deep(.el-table__body) {
                width: vh(395) !important;
            }
            :deep(col) {
                width: vh(75) !important;
                &:first-child{
                    width: vh(94) !important;
                }
            }
            :deep(.el-table__cell) {
                .cell {
                    width: vh(75);
                    white-space: normal; /* 允许换行 */
                    word-wrap: break-word;
                    line-height: vh(12);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                &.column_date {
                    .cell {
                        width: vh(94);
                    }
                }
            }
        }
    }
}
</style>
